<template>
  <Modal v-model="modals" scrollable title="订单发送货" class="order_box" :closable="false" width="1000"
         @on-visible-change="changeModal">
    <Form v-if="modals" ref="formItem" :model="formItem" :label-width="100" @submit.native.prevent>
      <FormItem label="选择类型：">
        <RadioGroup v-model="formItem.type" @on-change="changeRadio">
          <Radio label="1" v-if="!productType">发货</Radio>
          <Radio label="2" v-if="!productType">送货</Radio>
          <Radio label="3">无需配送</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem v-if="formItem.type == 1" v-show="export_open" label="发货类型：">
        <RadioGroup v-model="formItem.express_record_type" @on-change="changeExpress">
          <Radio label="1">手动填写</Radio>
          <Radio label="2">电子面单打印</Radio>
        </RadioGroup>
      </FormItem>
      <div>
        <FormItem label="快递公司：" v-if="formItem.type == 1">
          <Select v-model="formItem.delivery_name" filterable placeholder="请选择快递公司" style="width: 80%"
                  @on-change="expressChange">
            <Option v-for="(item, i) in express" :value="item.value" :key="item.value">{{ item.value }}
            </Option>
          </Select>
        </FormItem>
        <FormItem v-if="formItem.express_record_type === '1' && formItem.type == 1" label="快递单号：">
          <Input v-model="formItem.delivery_id" placeholder="请输入快递单号" style="width: 80%"></Input>
          <div class="trips" v-if="formItem.delivery_name == '顺丰速运'">
            <p>顺丰请输入单号 :收件人或寄件人手机号后四位，</p>
            <p>例如：SF000000000000:3941</p>
          </div>
        </FormItem>
        <template v-if="formItem.express_record_type === '2'">
          <FormItem label="电子面单：" class="express_temp_id">
            <Select v-model="formItem.express_temp_id" placeholder="请选择电子面单" style="width: 80%"
                    @on-change="expressTempChange">
              <Option v-for="(item, i) in expressTemp" :value="item.temp_id" :key="i">{{ item.title }}
              </Option>
            </Select>
            <Button v-if="formItem.express_temp_id" type="text" @click="preview">预览</Button>
          </FormItem>
          <FormItem label="寄件人姓名：">
            <Input v-model="formItem.to_name" placeholder="请输入寄件人姓名" style="width: 80%"></Input>
          </FormItem>
          <FormItem label="寄件人电话：">
            <Input v-model="formItem.to_tel" placeholder="请输入寄件人电话" style="width: 80%"></Input>
          </FormItem>
          <FormItem label="寄件人地址：">
            <Input v-model="formItem.to_addr" placeholder="请输入寄件人地址" style="width: 80%"></Input>
          </FormItem>
        </template>
      </div>
      <div v-show="formItem.type === '2'">
        <FormItem label="送货人：">
          <Select v-model="formItem.sh_delivery" placeholder="请选择送货人" style="width: 80%"
                  @on-change="shDeliveryChange">
            <Option v-for="(item, i) in deliveryList" :value="item.id" :key="i">
              {{ item.wx_name }}（{{ item.phone }}）
            </Option>
          </Select>
        </FormItem>
      </div>
      <div v-show="formItem.type === '3'">
        <FormItem label="备注：">
          <Input v-model="formItem.fictitious_content" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"
                 placeholder="备注" style="width: 80%"></Input>
        </FormItem>
      </div>
      <div v-if="splitOrder>1 && formItem.type !== '3'">
        <FormItem label="分单发货：">
          <Switch size="large" v-model="splitSwitch" :disabled="orderStatus === 8"
                  @on-change="changeSplitStatus">
            <span slot="open">开启</span>
            <span slot="close">关闭</span>
          </Switch>
          <div class="trips">
            <p>
              可选择表格中的商品单独发货，发货后会生成新的订单且不能撤回，请谨慎操作！
            </p>
          </div>
          <Table v-if="splitSwitch && manyFormValidate.length" :data="manyFormValidate"
                 @on-selection-change="selectOne" :columns="header">
            <template slot-scope="{ row, index }" slot="image">
              <div class="product-data">
                <img class="image" :src="row.cart_info.productInfo.image"/>
                <div class="name line2">
                  {{ row.cart_info.productInfo.store_name }}
                </div>
              </div>
            </template>
            <template slot-scope="{ row, index }" slot="value">
              <div>{{ row.cart_info.productInfo.attrInfo.suk }}</div>
            </template>
            <template slot-scope="{ row, index }" slot="sellPrice">
              <div>{{
                  row.cart_info.productInfo.attrInfo ? row.cart_info.productInfo.attrInfo.price : row.cart_info.productInfo.price
                }}
              </div>
            </template>
            <template slot-scope="{ row, index }" slot="price">
              <div>{{ row.cart_info.truePrice }}</div>
            </template>
          </Table>
        </FormItem>
      </div>
    </Form>
    <div slot="footer">
      <Button @click="cancel">取消</Button>
      <Button type="primary" @click="putSend">提交</Button>
    </div>
    <div ref="viewer" v-viewer v-show="temp">
      <img :src="temp.pic" style="display: none"/>
    </div>
  </Modal>
</template>

<script>
import {
  mapState
} from "vuex";
import {
  getExpressData,
  putDelivery,
  splitDelivery,
  orderExpressTemp,
  orderDeliveryList,
  orderSheetInfo,
  splitCartInfo,
} from "@api/order";

export default {
  name: "orderSend",
  props: {
    orderId: Number,
    status: Number,
    pay_type: String,
  },
  data() {
    return {
      productType: 0,
      orderStatus: 0,
      splitSwitch: true,
      formItem: {
        type: "1",
        express_record_type: "1",
        delivery_name: "",
        delivery_id: "",
        express_temp_id: "",
        to_name: "",
        to_tel: "",
        to_addr: "",
        sh_delivery: "",
        fictitious_content: "",
      },
      modals: false,
      express: [],
      expressTemp: [],
      deliveryList: [],
      temp: {},
      export_open: true,
      manyFormValidate: [],
      header: [{
        type: "selection",
        width: 60,
        align: "center",
      },
        {
          title: "商品信息",
          slot: "image",
          align: "center",
          width: 200,
        },
        {
          title: "规格",
          slot: "value",
          align: "center",
          minWidth: 120,
        },
        {
          title: "商品售价",
          slot: "sellPrice",
          align: "center",
          minWidth: 100,
        },
        {
          title: "商品优惠价",
          slot: "price",
          align: "center",
          minWidth: 100,
        },
        {
          title: "总数",
          key: "cart_num",
          align: "center",
          minWidth: 80,
        },
        {
          title: "待发数量",
          key: "surplus_num",
          align: "center",
          width: 180,
          render: (h, params) => {
            return h("div", [
              h("InputNumber", {
                props: {
                  min: 1,
                  max: params.row.numShow,
                  value: params.row.surplus_num || 1,
                },
                on: {
                  "on-change": (e) => {
                    params.row.surplus_num = e || 1;
                    this.manyFormValidate[params.index] = params.row;
                    this.selectData.forEach((v, index) => {
                      if (v.cart_id === params.row.cart_id) {
                        this.selectData.splice(index, 1, params
                            .row);
                      }
                    });
                  },
                },
              }),
            ]);
          },
        },
      ],
      selectData: [],
    };
  },
  computed: {
    ...mapState("store/order", [
      "splitOrder",
    ])
  },
  methods: {
    selectOne(data) {
      this.selectData = data;
    },
    changeModal(status) {
      if (!status) {
        this.cancel();
      }
    },
    changeSplitStatus(status) {
      if (status) {
        splitCartInfo(this.orderId).then((res) => {
          let data = res.data;
          data.forEach((item) => {
            item.numShow = item.surplus_num
          })
          this.manyFormValidate = data;
        });
      }
    },
    changeRadio(o) {
      this.$refs.formItem.resetFields();
      switch (o) {
        case "1":
          this.formItem.delivery_name = "";
          this.formItem.delivery_id = "";
          this.formItem.express_temp_id = "";
          this.formItem.express_record_type = "1";
          this.expressTemp = [];
          break;
        case "2":
          this.formItem.sh_delivery = "";
          break;
        case "3":
          this.formItem.fictitious_content = "";
          break;
        default:
          break;
      }
    },
    changeExpress(j) {
      switch (j) {
        case "2":
          this.formItem.delivery_name = "";
          this.formItem.express_temp_id = "";
          this.expressTemp = [];
          this.getList(2);
          break;
        case "1":
          this.formItem.delivery_name = "";
          this.formItem.delivery_id = "";
          this.getList(1);
          break;
        default:
          break;
      }
    },
    reset() {
      this.formItem = {
        type: "1",
        express_record_type: "1",
        delivery_name: "",
        delivery_id: "",
        express_temp_id: "",
        expressTemp: [],
        to_name: "",
        to_tel: "",
        to_addr: "",
        sh_delivery: "",
        fictitious_content: "",
      };
    },
    // 物流公司列表
    getList(type) {
      let status = type === 2 ? 1 : "";
      getExpressData(status)
          .then(async (res) => {
            this.express = res.data;
            this.getSheetInfo();
          })
          .catch((res) => {
            this.loading = false;
            this.$Message.error(res.msg);
          });
    },
    // 提交
    putSend(name) {
      let data = {
        id: this.orderId,
        datas: this.formItem,
      };
      if (
          this.formItem.type === "1" &&
          this.formItem.express_record_type === "2"
      ) {
        if (this.formItem.delivery_name === "") {
          return this.$Message.error("快递公司不能为空");
        } else if (this.formItem.express_temp_id === "") {
          return this.$Message.error("电子面单不能为空");
        } else if (this.formItem.to_name === "") {
          return this.$Message.error("寄件人姓名不能为空");
        } else if (this.formItem.to_tel === "") {
          return this.$Message.error("寄件人电话不能为空");
        } else if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.formItem.to_tel)) {
          return this.$Message.error("请输入正确的手机号码");
        } else if (this.formItem.to_addr === "") {
          return this.$Message.error("寄件人地址不能为空");
        }
      }
      if (
          this.formItem.type === "1" &&
          this.formItem.express_record_type === "1"
      ) {
        if (this.formItem.delivery_name === "") {
          return this.$Message.error("快递公司不能为空");
        } else if (this.formItem.delivery_id === "") {
          return this.$Message.error("快递单号不能为空");
        }
      }
      if (this.formItem.type === "2") {
        if (this.formItem.sh_delivery === "") {
          return this.$Message.error("送货人不能为空");
        }
      }

      if (this.splitSwitch) {
        data.datas.cart_ids = [];
        this.selectData.forEach((v) => {
          data.datas.cart_ids.push({
            cart_id: v.cart_id,
            cart_num: v.surplus_num,
          });
        });
      }
      putDelivery(data)
          .then((res) => {
            this.modals = false;
            this.$Message.success(res.msg);
            this.$emit("submitFail");
            this.reset();
            this.splitSwitch = false;
          })
          .catch((res) => {
            this.$Message.error(res.msg);
          });
    },
    cancel(name) {
      this.modals = false;
      this.orderStatus = 0;
      this.splitSwitch = false;
      this.selectData = [];
      this.reset();
    },
    // 电子面单列表
    expressChange(value) {
      let expressItem = this.express.find((item) => {
        return item.value === value;
      });
      if (expressItem === undefined) {
        return;
      }
      this.formItem.delivery_code = expressItem.code;
      if (this.formItem.express_record_type === "2") {
        this.expressTemp = [];
        this.formItem.express_temp_id = "";
        orderExpressTemp({
          com: this.formItem.delivery_code,
        })
            .then((res) => {
              this.expressTemp = res.data;
              if (!res.data.length) {
                this.$Message.error("请配置你所选快递公司的电子面单");
              }
            })
            .catch((err) => {
              this.$Message.error(err.msg);
            });
      }
    },
    getCartInfo(data, orderid) {
      this.$set(this, "orderStatus", data);
      this.$set(this, "splitSwitch", data === 8 ? true : false);
      splitCartInfo(this.orderId).then((res) => {
        let data = res.data;
        data.forEach((item) => {
          item.numShow = item.surplus_num
        })
        this.manyFormValidate = data;
        this.productType = data[0].product_type;
        if (this.productType == 3) {
          this.formItem.type = '3'
          this.formItem.fictitious_content = "";
        }
      });
    },
    getDeliveryList() {
      orderDeliveryList()
          .then((res) => {
            this.deliveryList = res.data.list;
          })
          .catch((err) => {
            this.$Message.error(err.msg);
          });
    },
    getSheetInfo() {
      orderSheetInfo()
          .then((res) => {
            const data = res.data;
            for (const key in data) {
              if (data.hasOwnProperty(key)) {
                this.formItem[key] = data[key];
              }
            }
            this.export_open =
                data.export_open === undefined ? true : data.export_open;
            if (!this.export_open) {
              this.formItem.express_record_type = "1";
            }
            this.formItem.to_addr = data.to_add;
          })
          .catch((err) => {
            this.$Message.error(err.msg);
          });
    },
    shDeliveryChange(value) {
      if (!value) return;
      let deliveryItem = this.deliveryList.find((item) => {
        return item.id === value;
      });
      this.formItem.sh_delivery_name = deliveryItem.wx_name;
      this.formItem.sh_delivery_id = deliveryItem.phone;
      this.formItem.sh_delivery_uid = deliveryItem.uid;
    },
    expressTempChange(tempId) {
      this.temp = this.expressTemp.find((item) => {
        return tempId === item.temp_id;
      });
      if (this.temp === undefined) {
        this.temp = {};
      }
    },
    preview() {
      this.$refs.viewer.$viewer.show();
    },
  },
};
</script>

<style scoped>
.ivu-table-wrapper-with-border {
  border: none;
}

.ivu-table-border th, .ivu-table-border td {
  border-right: none;
}

.express_temp_id {
  position: relative;
}

.express_temp_id button {
  position: absolute;
  top: 50%;
  right: 110px;
  padding: 0;
  border: none;
  background: none;
  transform: translateY(-50%);
  color: #57a3f3;
}

.ivu-btn-text:focus {
  box-shadow: none;
}

.trips {
  color: #ccc;
}

.product-data {
  display: flex;
  align-items: center;
}

.product-data .name {
  line-height: 1.4;
  text-align: left;
  margin-left: 5px;
}

.product-data .image {
  width: 50px !important;
  height: 50px !important;
}
</style>
